<template>
  <div class="user-money">
    <div class="user-title">费用趋势</div>
    <div style="display: flex; justify-content: space-between">
      <div
        v-if="flag"
        id="user-money-line"
        :style="{ width: '100%', height: '250px' }"
      ></div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
var option = null;
export default {
  name: "userIndex",
  components: {},
  data() {
    return {
      flag: true,
      list: [],
    };
  },
  watch: {},
  created() {},
  mounted() {
    // this.getDone()
    // this.getTrend();
    // window.addEventListener("resize", () => {
    //   this.draw();
    // });
  },
  methods: {
    goMore() {
      this.$router.push({
        path: "/todoItem/done",
      });
    },
    getTrend() {
      request({
        url: "/homepage/user/resourceUpTrend?offset=7",
        method: "get",
      }).then((res) => {
        if (res.success) {
          this.line(res);
        }
      });
    },

    line(data) {
      let legendData = [],
        series = [],
        values=[{name:'总金额',key:'totalMoney'},
        {name:'CPU',key:'vcpuMoney'},
        {name:'内存',key:'vmemoryMoney'},
        {name:'存储',key:'romMoney'},
        {name:'操作系统',key:'osMoney'},
        {name:'应用安全',key:'yyan'},
        {name:'其他',key:'qita'},
        ]
       values.forEach(item=>{
         legendData.push(item.name);
         let obj = {
           name: item.name,
           type: "line",
           smooth: true,
           data: [],
         };

         data.trends.forEach((it) => {
           if(data.data[it]){
             let temp=data.data[it]
            temp.yyan=temp.safeMoney;

            temp.yyan=parseInt(temp.yyan)

            temp.qita=parseFloat(temp.totalMoney)-(parseFloat(temp.vcpuMoney)+parseFloat(temp.vmemoryMoney)
            +parseFloat(temp.romMoney)+parseFloat(temp.osMoney)+parseFloat(temp.yyan) )
          temp.qita=parseInt(temp.qita)
             obj.data.push(parseInt(temp[item.key]));
           }else{
             obj.data.push(0);
           }
         });
         series.push(obj);
       })

      option = {
        animationDuration: 5000,
        color: ["#2e76ff", "#45c6fc", "#ff6161", "#f5d900", "#7d7d7d"],
        tooltip: {
          trigger: "axis",
         formatter: function (params) {
           let html=params[0].name+"<br>";
           for(let i=0;i<params.length;i++){
             html+='<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+params[i].color+';"></span>'
              html+=params[i].seriesName+": "+params[i].value+"元<br>";
           }
           return html;
         }
          // formatter: (p) => {
          //     console.log(p)
          //     return p[0].seriesName+'：'+p[0].value+'%<br/>' + p[1].seriesName+'：'+p[1].value+'%<br/>'+p[2].seriesName+'：'+p[2].value+'%<br/>'
          // }
        },
        legend: {
          data: legendData,
        },
        grid: {
          top:'15%',//距上边距
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: data.trends,
        },
        yAxis: {
          type: "value",
        },
        series,
      };
      this.draw();
    },
    draw() {
      if (!option) {
        return;
      }
      this.flag = false;
      setTimeout(() => {
        this.flag = true;
        setTimeout(() => {
          let myChart = this.$echarts.init(
            document.getElementById("user-money-line")
          );
          myChart.setOption(option);
        }, 10);
      }, 10);
    },
  },
};
</script>

<style scoped lang="scss">
.user-money {
  margin: 20px 0px 0 0px;
  background: white;
  border-radius: 6px;
  padding: 16px 16px 40px 16px;
  width: 48%;
  width: 700px;
  height: 284px;

  .user-title {
    border-left: 3px solid rgb(138, 205, 255);
    font-weight: bold;
    padding-left: 10px;
    margin-bottom: 10px;
  }
}
</style>
